<template>
  <div class="home-box">
    <div>
      <div>
        <LineEchart :height="130"/>
        <div>
          <h2>文献访问</h2>
          <p>
            <ExclamationCircleOutlined/>
          </p>
        </div>
      </div>
      <div>
        <LineEchart height="130" :xData="['78', '12', '23', '12', '231', '231']"
                    :yData="[64, 12, 23, 12, 231, 231]"/>
        <div>
          <h2>文章访问</h2>
          <p>
            <ExclamationCircleOutlined/>
          </p>
        </div>
      </div>
      <div>
        <ColumnEchart/>
        <div>
          <h2>区域访问</h2>
          <p>
            <ExclamationCircleOutlined/>
          </p>
        </div>
      </div>
    </div>
    <div>
      <div>
        <h2>文献top↓</h2>
        <ol>
          <RankingList v-for="(item , index) of literatureData" :index="index" :key="item.id" :item="item"/>
        </ol>
      </div>
      <div>
        <h2>文章排名top↓</h2>
        <ol>
          <RankingList v-for="(item , index) of articleData" :index="index" :key="item.id" :item="item"/>
        </ol>
      </div>
      <div>
        <h2>区域top↓</h2>
        <ol>
          <RankingList v-for="(item , index) of regionData" :index="index" :key="item.id" :item="item"/>
        </ol>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import LineEchart from "@/components/LineEchart.vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import ColumnEchart from "@/components/ColumnEchart.vue";
import {onMounted, ref} from "vue";
import {articleRanking, literatureRanking, regionRanking} from "@/api/api";
import RankingList from "@/components/RankingList.vue";

interface DataType {
  id: string,
  name: string,
  visit_num: number
}

// 文献排名
const literatureData = ref<Array<DataType>>([]);
// 文章排名
const articleData = ref<Array<DataType>>([]);
// 区域排名
const regionData = ref<Array<DataType>>([]);

onMounted(() => {
  literatureRanking().then(r => {
    const {rows} = r.data.data.data;
    literatureData.value = rows;
  });
  articleRanking().then(r => {
    const {rows} = r.data.data.data;
    articleData.value = rows;
  });
  regionRanking().then(r => {
    const {rows} = r.data.data.data;
    regionData.value = rows;
  })
})


</script>
<style scoped lang="less">
.home-box {
  padding: 30px 0;
  padding-right: 10px;

  > div:first-of-type {
    display: flex;
    align-items: center;
    justify-content: space-between;

    > div {
      flex: 1;
      background: #eee;
      padding: 10px;
      margin-right: 10px;

      &:last-of-type {
        margin-right: 0;
      }

      > div:last-of-type {
        display: flex;
        border-top: 1px solid #ddd;
        padding-top: 10px;

        > h2 {
          text-align: left;
          color: #111;
          margin: 0;
          font-size: 16px;
          font-weight: 500;
          flex: 1;
        }

        > p {
          text-align: right;
          flex: 1;
          margin: 0;
        }
      }
    }
  }

  > div:last-of-type {
    width: 100%;
    display: flex;
    margin-top: 10px;

    > div {
      flex: 1;
      background: #eee;
      margin-right: 10px;

      &:last-of-type {
        margin-right: 0;
      }

      h2 {
        margin: 10px 0;
        font-size: 20px;
        color: #1890ff;
        padding-left: 10px;
      }

      > ol {
        width: 100%;
        font-size: 16px;
      }
    }
  }
}
</style>